<template>
  <div class="document-wrap">
    <div class="menu-wrap" :class="isCollapse ? '' : 'expand'">
      <transition name="hide" mode="out-in">
        <a class="show-menu-button" type="button" v-if="!isCollapse"
           @click="() => {this.isCollapse = !this.isCollapse}">
          <MenuButton class="show-arrow"/>
        </a>
      </transition>
      <transition name="show">
        <a class="hide-menu-button" type="button" v-if="isCollapse" @click="() => {this.isCollapse = !this.isCollapse}">
          <MenuButton class="hide-arrow"/>
        </a>
      </transition>
      <transition name="slide" mode="out-in">
        <el-menu
            :collapse="isCollapse"
            :default-active="activeIndex"
            background-color="var(--el-bg-color)"
            active-text-color="#1A9B92"
            class="el-menu-vertical-demo"
        >
          <el-sub-menu :index="index + ''" v-for="(oneLevel, index) in documentTree" :key="oneLevel.id">
            <template #title v-if="!isCollapse">
              <el-icon class="folder-icon-wrap">
                <FolderIcon/>
              </el-icon>
              <span>{{ oneLevel.label }}</span>
            </template>
            <el-sub-menu
                :index="twoLevel.id+''"
                v-for="twoLevel in oneLevel.children"
                :key="twoLevel.id" @select="showFile(twoLevel.documentId,twoLevel.label,twoLevel.type)"
            >
              <template #title>
                <el-icon class="folder-icon-wrap">
                  <FolderIcon/>
                </el-icon>
                {{ twoLevel.label }}
              </template>
              <el-menu-item
                  :index="threeLevel.documentId + ''"
                  v-for="(threeLevel) in twoLevel.children"
                  :key="threeLevel.id" @click="showFile(threeLevel.documentId,threeLevel.label,threeLevel.type)">
                <el-icon>
                  <component :is="typeData(threeLevel.type)"></component>
                </el-icon>
                {{ threeLevel.label }}
              </el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </transition>
    </div>
    <div class="file-wrap">
      <FileContent :url="url" :realUrl="fileUrl" :documentId="documentId" :label="label" :type="docType"/>
    </div>
  </div>
</template>
<script>
import FileContent from '@/components/homeDoc/FileContent.vue'
import {reactive, ref, toRefs, onMounted} from 'vue'
import {computed} from '@vue/reactivity'
import {getDocumentTree, selectFileUrl, selectFirstDocumentId} from '@/api/document'
import {ElMessage} from 'element-plus'
import ExcelIcon from '@/components/document/ExcelIcon.vue'
import WordIcon from '@/components/document/WordIcon.vue'
import PptIcon from '@/components/document/PptIcon.vue'
import UnknownIcon from '@/components/document/UnknownIcon.vue'
import PdfIcon from '@/components/document/PdfIcon.vue'
import JpgIcon from '@/components/document/JpgIcon.vue'
import Mp4Icon from '@/components/document/Mp4Icon.vue'
import TxtIcon from "@/components/document/TxtIcon";
import XmindIcon from "@/components/document/XmindIcon";
import MdIcon from "@/components/document/MdIcon";
import HexIcon from "@/components/document/HexIcon";
import {Base64} from "js-base64";
import FolderIcon from "@/components/document/FolderIcon";
import MenuButton from "@/components/common/MenuButton"
import useDocumentStore from "@/store/modules/document";

export default {
  components: {FileContent, ExcelIcon, WordIcon,
    PptIcon, UnknownIcon, FolderIcon, MenuButton,
    JpgIcon,
    TxtIcon,
    PdfIcon,
    XmindIcon,
    MdIcon,
    HexIcon,
    Mp4Icon},
  props: {
    docId: Number,
    type: String,
  },
  setup(props) {
    const isCollapse = ref(true)
    const store = useDocumentStore()
    const docId = ref(props.docId)
    let data = reactive({
      activeIndex: '',
      documentTree: [],
      url: '',
      documentId: null,
      label: '',
      docType: '',
      fileUrl: ''
    })

    if (docId.value !== undefined) {
      data.activeIndex = docId.value + ''
      selectFileUrl(docId.value).then(res => {
        let fileUrl = process.env.VUE_APP_MINIO_NETWORK + res.data.replace('/storage', '')
        data.url = process.env.VUE_APP_PREVIEW_API + '/onlinePreview?url=' + encodeURIComponent(Base64.encode(fileUrl))
        var document = fileUrl.substring(fileUrl.lastIndexOf("/") + 1)
        data.fileUrl = res.data
        data.label = document.substring(0, document.lastIndexOf("."))
        data.docType = document.substring(document.lastIndexOf(".") + 1)
        data.documentId = data.activeIndex
      })
    } else {
      selectFirstDocumentId().then(res => {
        data.activeIndex = res.data + ''
        selectFileUrl(res.data).then(res => {
          let fileUrl = process.env.VUE_APP_MINIO_NETWORK + res.data.replace('/storage', '')
          data.url = process.env.VUE_APP_PREVIEW_API + '/onlinePreview?url=' + encodeURIComponent(Base64.encode(fileUrl))
          var document = fileUrl.substring(fileUrl.lastIndexOf("/") + 1)
          data.label = document.substring(0, document.lastIndexOf("."))
          data.docType = document.substring(document.lastIndexOf(".") + 1)
          data.fileUrl = res.data
          data.documentId = data.activeIndex
        })
      })
    }
    getDocumentTree(props.type).then(res => {
      data.documentTree = res.data
    })
    const showFile = (id, label, type) => {
      id && useDocumentStore().getFileUrl(id).then(res => {
        data.fileUrl = store.realUrl
        data.url = res
        data.documentId = id
        data.label = label
        data.docType = type
      }).catch(err => {
        ElMessage(err)
      })
    }

    onMounted(() => {

    })

    const typeData = computed(() => {
      return (type) => {
        const typeMap = {
          'doc': 'WordIcon',
          'docx': 'WordIcon',
          'ppt': 'PptIcon',
          'pptx': 'PptIcon',
          'pdf': 'PdfIcon',
          'xls': 'ExcelIcon',
          'xlsx': 'ExcelIcon',
          'folder': 'FolderIcon',
          'jpg' : 'JpgIcon',
          'png' : 'JpgIcon',
          'jpeg' : 'JpgIcon',
          'xmind': 'XmindIcon',
          'md': 'MdIcon',
          'txt': 'TxtIcon',
          'hex': 'HexIcon',
          'mp4':'Mp4Icon'
        }
        return typeMap[type.toLowerCase()] || 'UnknownIcon'
      }
    })
    return {
      isCollapse,
      isShow: store.isShow,
      ...toRefs(data),
      typeData,
      showFile,

    }
  }
}
</script>
<style scoped>
.document-wrap {
  display: flex;
  height: calc(100vh - 61px);
  border-top: 1px solid rgb(228, 231, 237);
  top: 60px;
}

.menu-wrap {
  border-right: 1px solid rgb(228, 231, 237);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--el-bg-color);
}

.show-menu-button {
  position: absolute;
  height: 60px;
  left: 220px;
  width: 18px !important;
  top: 45%;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  /* border-bottom-right-radius: 9px; */
  /* border-top-right-radius: 9px; */
  border-radius: 8.5px;
  z-index: 1;

}

.show-menu-button:hover, .hide-menu-button:hover {
  cursor: pointer;
}

.hide-menu-button {
  position: absolute;
  height: 60px;
  width: 18px !important;
  top: 45%;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  /* border-bottom-right-radius: 9px; */
  /* border-top-right-radius: 9px; */
  border-radius: 8.5px;
  z-index: 1;
}

.el-menu-vertical-demo.el-menu--collapse {
  width: 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
}

.menu-wrap.expand {

}

.hide-arrow {
  margin-top: 24px;
  width: 16px;
  margin-left: 2px;
  transform: rotate(180deg);
}

.show-arrow {
  margin-top: 24px;
  width: 16px;
}

.el-menu {
  border-right: none;
}

.hide-enter-active {
  transition: all 0.4s
}

.show-enter-active {
  transition: all 0.4s
}

.hide-enter-from {
  transform: translateX(-150px);
  opacity: 0;
}

.show-enter-from {
  transform: translateX(150px);
  opacity: 0;
}

>>> .el-sub-menu__title {
  height: 40px !important;
  font-size: 14px;
  line-height: 40px !important;
  color:var(--el-text-color-regular);
  font-weight: 600;
}

>>> .el-submenu .el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}


>>> .el-submenu__title:hover {
  background-color: #1a9b9236 !important;
}

>>> .el-menu-item {
  height: 40px;
  font-size: 13px;
}

>>> .el-menu-item:hover {
  background: #1a9b9236 !important;
}

>>> .el-submenu__title i {
  color: #000000;
}


.file-wrap {
  flex: 1;
  position: relative;
  padding: 1.6rem;
}

.folder-icon-wrap {
  color: #fbc86a;
}
</style>
